<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>个人中心</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/public.css" rel="stylesheet" />
		<link href="css/iconfont.css" rel="stylesheet" />
		<style type="text/css">
			.avatar-wrap{
				position: relative;
				background: url(images/center_bg.png) no-repeat center;
				background-size: cover;
				width: 100%;
				padding: 30px 0 0px;
			}
			.avatar{
			    display: block;
			    width: 70px;
			    margin: 0 auto 8px;
			    border: 2px solid #ffffff;
			    border-radius: 50%;
			    position: relative;
			}
			.avatar-wrap span{
				display: block;
				text-align: center;
			}
			.icon-shezhi{
				position: absolute;
				top: 0px;
				right: 0px;
				color: #FFFFFF;
				font-size: 18px;
				padding: 15px 10px;
			}
			.account{
				background: #FFFFFF;
			}
			.my-btn{
				width: 80px;
				height: 34px;
				line-height: 1;
				border-radius: 6px;
				border: 0;
				margin: 10px 20px 20px;
				color: #FFFFFF;
			}
			.account .extras{
				padding-bottom: 20px;
				display: flex;
				display: -webkit-flex;
				
			}
			.account .extras>div{
				flex: 1;
				-webkit-flex: 1;
				text-align: center;
				position: relative;
			}
			.account .extras>div:after{
				content: "";
				position: absolute;
				right: 0;    
				bottom: 12px;
   	 			height: 20px;
				width: 1px;
				background: #DDDDDD;
			}
			.account .extras>div:nth-last-of-type(1):after{
				width: 0;
			}
			.account .extras span{
				display: block;
			}
			.list{
				margin: 12px 0;
				font-size: 15px;
				color: #333333;
			}
			.mui-table-view:before,.mui-table-view:after{
				height: 0;
			}
			.mui-table-view-cell:after{
				left: 0;
			}
			
		</style>
	</head>

	<body>
		<nav class="mui-bar mui-bar-tab header">
			<a class="mui-tab-item" data-id="0" data-href="index.html">
				<span class="mui-icon iconfont icon-shouye1"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" data-id="1" data-href="company_news.html">
				<span class="mui-icon iconfont icon-xiaoxi1"></span>
				<span class="mui-tab-label">公司动态</span>
			</a>
			<a class="mui-tab-item my-active" data-id="2" data-href="my_center.html">
				<span class="mui-icon iconfont icon-wode"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<div class="mui-content" id="app">
			<div class="avatar-wrap">
				<img src="images/avatar.png" class="avatar" alt="" />
				<span class="f_16 mb_5">小明</span>
				<span class="color_4 f_15">账号余额：¥ 9999</span>
				<span class="iconfont icon-shezhi" id="setting"></span>
			</div>
			<div class="account">
				<div class="mui-button-row">
					<button type="button" class="mui-btn my-btn btn-red" id="recharge">充值</button>
					<button type="button" class="mui-btn my-btn btn-orange" id="withdrawals">提现</button>
				</div>
				<div class="extras">
					<div>
						<span class="f_16 color_1">999</span>
						<span class="f_13 color_5">累计收益(元)</span>
					</div>
					<div>
						<span class="f_16 color_1">999</span>
						<span class="f_13 color_5">待收金额(元)</span>
					</div>
					<div>
						<span class="f_16 color_1">999</span>
						<span class="f_13 color_5">可用资金(元)</span>
					</div>
					<div>
						<span class="f_16 color_1">999</span>
						<span class="f_13 color_5">冻结资金(元)</span>
					</div>
				</div>
			</div>
			<ul class="mui-table-view list">
			    <li class="mui-table-view-cell" id="authentication"><a class="mui-navigate-right">实名认证</a></li>
			    <li class="mui-table-view-cell" id="bankCard"><a class="mui-navigate-right">绑定银行卡</a></li>
			    <li class="mui-table-view-cell" id="modify_pwd"><a class="mui-navigate-right">修改登录密码</a></li>
			    <li class="mui-table-view-cell"><a class="mui-navigate-right">修改支付密码</a></li>
			</ul>
			<ul class="mui-table-view list">
			    <li class="mui-table-view-cell" id="investment_list"><a class="mui-navigate-right">投资记录</a></li>
			    <li class="mui-table-view-cell" id="investment_list2"><a class="mui-navigate-right">未满标投资记录</a></li>
			</ul>
			
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="vue/vue.min.js"></script>
		<script type="text/javascript">
			
			(function($,doc){
				$.init({
					 pullRefresh : {
					    container:"#app",
					    down : {
					      style:'circle',
					      color:'#ff5811', 
					      height:'50px',
					      range:'100px', 
					      offset:'0px', 
					      auto: true,
					      callback :function(){
					      	 mui('#app').pullRefresh().endPulldown();
					      }
					    }
					  }
				});
				app.navTab();
				var el={
					setting:doc.getElementById("setting"),
					recharge:doc.getElementById("recharge"),
					withdrawals:doc.getElementById("withdrawals"),
					authentication:doc.getElementById("authentication"),
					bankCard:doc.getElementById("bankCard"),
					modify_pwd:doc.getElementById("modify_pwd"),
					investment_list:doc.getElementById("investment_list"),
					investment_list2:doc.getElementById("investment_list2"),
					
				}
				el.setting.addEventListener("tap",function(){
					app.openViwe("setting.html")
				});
				el.recharge.addEventListener("tap",function(){
					app.openViwe("recharge.html")
				});
				el.withdrawals.addEventListener("tap",function(){
					app.openViwe("withdrawals.html")
				});
				el.authentication.addEventListener("tap",function(){
					app.openViwe2("authentication.html")
				});
				el.bankCard.addEventListener("tap",function(){
					app.openViwe("bank_card.html")
				});
				el.modify_pwd.addEventListener("tap",function(){
					app.openViwe2("modifyPwd.html")
				});
				el.investment_list.addEventListener("tap",function(){
					app.openViwe("investment_list.html")
				});
				el.investment_list2.addEventListener("tap",function(){
					app.openViwe("investment_list2.html")
				});
				
				$.plusReady(function(){
					plus.webview.currentWebview().setStyle({
	                    scrollIndicator: 'none'
	             	});
				})
			}(mui,document))
		</script>
	</body>

</html>